.admin {
  width     : 99vw;
  height    : 100vh;
  display   : flex;
  box-sizing: border-box;

  .saiderbar {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    overflow-y      : auto;
    user-select     : none;
    background-color: #2F3E51;
    box-sizing      : border-box;

    .logo {
      padding        : 10px 0;
      display        : flex;
      align-items    : center;
      justify-content: center;

      .title {
        color      : antiquewhite;
        font-size  : 18px;
        margin-left: 5px;
        cursor     : default;
      }
    }

    .list-item {
      display           : flex;
      align-items       : center;
      margin            : 5px 0;
      padding           : 5px 10px;
      color             : #8a8a8a;
      width             : 100%;
      font-size         : 16px;
      cursor            : pointer;
      // justify-content: center;

      div {
        display    : flex;
        align-items: center;

        img {
          width : 20px;
          height: 20px;
        }

        div {
          margin-left: 10px;
        }
      }
    }

    .active-list-item {
      display            : flex;
      align-items        : center;
      margin             : 5px 0;
      padding            : 5px 10px;
      color              : #1296db;
      width              : 100%;
      font-size          : 16px;
      background-color   : #e6e6e6;
      cursor             : pointer;
      // justify-content : center;

      div {
        display    : flex;
        align-items: center;

        img {
          width : 20px;
          height: 20px;
        }

        div {
          margin-left: 10px;
        }
      }
    }

    .level-list {
      display       : flex;
      align-items   : center;
      width         : 100%;
      flex-direction: column;

      .level-list-item {
        width          : 100%;
        display        : flex;
        align-items    : center;
        margin         : 5px 0;
        padding        : 5px 10px;
        color          : #8a8a8a;
        font-size      : 16px;
        cursor         : pointer;
        justify-content: space-between;

        div:first-child {
          display    : flex;
          align-items: center;

          div {
            margin-left: 10px;
          }

          img {
            width : 20px;
            height: 20px;
          }
        }

        div:last-child {
          img {
            width : 20px;
            height: 20px;
          }
        }
      }

      .level-item {
        width     : 100%;
        box-sizing: border-box;
        padding   : 5px 10px;
        color     : #8a8a8a;
        font-size : 16px;
        margin    : 10px 0;
        cursor    : pointer;

        img {
          width : 20px;
          height: 20px;
          float: left;
        }

        div {
          width: 50%;
          float: left;
          margin-left: 15px;
        }
      }

      .active-level-item {
        width           : 100%;
        box-sizing      : border-box;
        padding         : 5px 10px;
        color           : #1296db;
        font-size       : 16px;
        background-color: #e6e6e6;
        cursor          : pointer;

        img {
          width : 20px;
          height: 20px;
          float: left;
        }

        div {
          width: 50%;
          float: left;
          margin-left: 15px;
        }
      }
    }
  }

  .main {
    background-color: #E9EEF2;
    box-sizing      : border-box;

    .header {
      box-sizing     : border-box;
      height         : 50px;
      display        : flex;
      align-items    : center;
      padding        : 0 10px;
      justify-content: space-between;

      .image {
        display        : flex;
        align-items    : center;
        justify-content: center;
        cursor         : pointer;
        width          : 36px;
        user-select    : none;
      }

      .avtor {
        position    : relative;
        margin-right: 20px;

        img {
          width        : 36px;
          height       : 36px;
          border-radius: 50%;
          cursor       : pointer;
        }

        .layout {
          position        : absolute;
          display         : none;
          width           : 100px;
          height          : 50px;
          top             : 35px;
          right           : -30px;
          padding         : 5px;
          text-align      : center;
          border-radius   : 10px;
          background-color: rgba(255, 255, 255, 0.8);

          .out {
            cursor: pointer;
          }

          .out:hover {
            color           : brown;
            border-radius   : 10px;
            background-color: #b4b4b4;
          }
        }
      }

      .avtor:hover {
        .layout {
          display: block;
        }
      }
    }

    .content {
      height          : calc(100vh - 60px);
      background-color: #fff;
      padding         : 10px;
      margin          : 0 10px;
      box-sizing      : border-box;
      overflow-y      : auto;
    }
  }
}